<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="delAllSelection"
          >新增工费</el-button
        >
        <el-button type="primary" class="handle-del mr10" @click="delall"
          >批量删除</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="行号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column prop="fineness" label="成色"></el-table-column>
        <el-table-column prop="style" label="款式"></el-table-column>
        <el-table-column
          prop="basicwage"
          label="基本工费(元)"
        ></el-table-column>
        <el-table-column
          prop="otherwage"
          label="其他工费(元)"
        ></el-table-column>
        <el-table-column prop="loss" label="损耗"></el-table-column>
        <el-table-column prop="microloss" label="微镶损耗"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="修改编辑" :visible.sync="editVisible" width="60%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="成色">
          <el-input v-model="form.fineness"></el-input>
        </el-form-item>
        <el-form-item label="款式">
          <el-input v-model="form.style"></el-input>
        </el-form-item>
        <el-form-item label="基本工费">
          <el-input v-model="form.basicwage"></el-input>
        </el-form-item>
        <el-form-item label="其他工费">
          <el-input v-model="form.otherwage"></el-input>
        </el-form-item>
        <el-form-item label="损耗">
          <el-input v-model="form.loss"></el-input>
        </el-form-item>
        <el-form-item label="微镶损耗">
          <el-input v-model="form.microloss"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增框弹出-->
    <el-dialog title="新增编辑" :visible.sync="addVisible" width="60%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="成色">
          <el-input v-model="form.fineness"></el-input>
        </el-form-item>
        <el-form-item label="款式">
          <el-input v-model="form.style"></el-input>
        </el-form-item>
        <el-form-item label="基本工费">
          <el-input v-model="form.basicwage"></el-input>
        </el-form-item>
        <el-form-item label="其他工费">
          <el-input v-model="form.otherwage"></el-input>
        </el-form-item>
        <el-form-item label="损耗">
          <el-input v-model="form.loss"></el-input>
        </el-form-item>
        <el-form-item label="微镶损耗">
          <el-input v-model="form.microloss"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "pifa",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      ab: null,
      addVisible: false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 6,
      form: {},
      idx: -1,
      id: -1,
      ids: []
    };
  },
  created() {
    this.getData();
    /*    this.getnewlist();*/
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .get(this.$api.pifa.findall, {
          params: {
            pageNum: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          console.log(response);
          this.$set(this.$data, "tableData", result);
          this.pageTotal = response.data.data.total || 50;
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(this.$api.pifa.del, [row.id], {
              headers: {
                "Content-Type": "application/json"
              }
            })
            .then(response => {
              console.log(response);
              this.$message.success(response.data.msg);
              this.getData();
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
        })
        .catch(() => {});
    },
    delall() {
      this.$axios({
        method: "post",
        url: this.$api.pifa.del,
        data: this.ids
      })
        .then(response => {
          console.log(response);
          this.$message.success(response.data.msg);
          this.getData();
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var arr = [];
      for (var i = 0; i < val.length; i++) {
        arr.push(val[i].id);
      }
      this.ids = arr;
    },
    delAllSelection() {
      this.addVisible = true;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.idx = index;
      this.form = { ...row };
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$axios
        .post(this.$api.pifa.update, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    // 分页导航
    handlePageChange(val) {
      console.log(val);
      console.log(arguments);
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    addEdit() {
      this.addVisible = false;
      console.log(this.form);
      this.$axios
        .post(this.$api.pifa.insert, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.getData();
        });
      this.form = {};
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
